// import { lessonPlan, teachingProcess, reflection } from './data.js'

// 假设从服务器获取的JSON数据，这里直接使用之前转换的JSON数据
const lessonPlan = {
    "教学单元": "任务一：基于人脸识别数据集的模式识别项目实训",
    "教案编号": "教案一",
    "课程名称": "机器学习与模式识别",
    "学时安排": "2学时（90分钟）",
    "授课班级": "2024人工智能工程技术1班",
    "授课地点": "智慧物联网实训室",
    "授课周数": "第10周",
    "使用技术": "PCA降维",
    "教学内容": {
        "课前任务": [
            "复习Python基础语法、函数定义与使用、文件操作等知识，回顾图像基本概念。",
            "查阅人脸识别算法资料，收集并总结相关论文或博客。",
            "安装Python开发环境。"
        ],
        "课中任务": [
            "讲解SVM、KNN和随机森林算法原理及在人脸识别中的应用（20分钟）。",
            "介绍数据集结构，指导数据下载、清洗、标注和划分（15分钟）。",
            "用scikit-learn库构建模型并调优，讨论过拟合问题（30分钟）。",
            "讲解评估指标并评估模型（15分钟）。",
            "用Python和OpenCV搭建应用框架，鼓励拓展功能（10分钟）。"
        ],
        "课后任务": [
            "撰写项目报告（课后1周内完成）。",
            "优化拓展代码（课后1周内完成）。",
            "关注技术动态，撰写调研报告（持续进行）。"
        ],
        "课程思政": [
            "强调技术积极作用，引导思考隐私问题。",
            "介绍我国科研成果，激发民族自豪感和创新精神。",
            "培养团队合作、沟通能力和坚韧意志。"
        ]
    },
    "具体学情分析": {
        "知识和技能基础": [
            "有Python基础，但深度学习框架和复杂算法实现不熟练。",
            "了解计算机视觉基本概念，人脸识别算法理解初级。",
            "部分学生接触过机器学习算法，但项目实践经验少。"
        ],
        "认知和实践能力": [
            "对前沿技术有热情，但面对难题易畏难。",
            "逻辑思维有基础，但理论实践转换困难。",
            "实践操作能力参差不齐。"
        ],
        "学习特点": [
            "喜欢实践操作，关注实际项目。",
            "自主学习能力有差异。",
            "倾向小组合作学习。"
        ],
        "信息素养": [
            "能搜索信息，但筛选整合能力待提高。",
            "对开源代码和技术社区了解不足。"
        ]
    },
    "教学目标": {
        "素质目标": [
            "培养创新和实践能力。",
            "增强团队合作和沟通能力。",
            "提升职业道德和社会责任感。"
        ],
        "知识目标": [
            "理解人脸识别算法原理和流程。",
            "熟悉数据集处理方法。",
            "掌握模型训练和优化技巧。",
            "了解应用领域和趋势及开发方法。"
        ],
        "能力目标": [
            "独立完成人脸识别项目搭建。",
            "优化改进模型。",
            "具备自主学习和解决问题能力。"
        ]
    },
    "教法": "任务驱动，线上线下混合式教学",
    "学法": "实践操作、合作探究、自主学习",
    "教学重点": [
        "SVM、KNN、随机森林算法在人脸识别中的原理和实现流程。",
        "人脸识别数据集处理流程，包括数据标注、划分。",
        "传统机器学习模型的训练过程，涵盖模型选择、参数调整。",
        "基于传统算法的人脸识别应用开发，掌握Python实现方法。"
    ],
    "教学难点": [
        "理解SVM的核函数、KNN的K值选择、随机森林的决策树构建等关键概念。",
        "针对不同数据集和应用场景，选择合适的传统算法并调优参数，提高识别准确率。",
        "处理高维人脸数据时，如何优化传统算法性能，避免过拟合或欠拟合。",
        "拓展基于传统算法的人脸识别应用功能，满足实际需求。"
    ],
    "教学重点解决办法": [
        "利用动画、可视化工具及示例辅助教学，结合案例讲解算法实现步骤，提供代码示例。",
        "现场演示数据集处理过程，提供标注指南和划分示例，让学生动手操作。",
        "提供模型训练教程，对比不同模型训练效果，巡回指导参数调整。",
        "以实际项目为案例，讲解Python实现步骤，提供模板和示例代码，组织小组开发。"
    ],
    "教学难点解决办法": [
        "用通俗易懂语言和生活实例解释复杂概念，提供数学推导材料。",
        "组织对比实验，提供算法选择和调优指南，邀请专家分享经验。",
        "介绍降维技术和正则化方法，组织实践活动对比优化效果。",
        "提供技术资料和开源代码，组织小组讨论，鼓励参加开源项目或竞赛。"
    ],
    "环节": {
        "课前导学": [
            "布置知识复习、资料收集、环境自查任务。",
            "分析任务难点、资料收集思路和环境自查问题。",
            "进行涵盖Python应用、人脸识别理论、开发环境配置的黑盒测试。"
        ],
        "课中探知": [
            "展示人脸识别应用案例，导入主题。",
            "进行基础、拓展、性能优化、用户体验功能设计。",
            "数据准备，演示PCA降维过程。",
            "介绍数据集，指导下载、标注、划分。",
            "划分训练集和测试集，用SVM训练模型。",
            "评估模型，指导优化策略。",
            "引导测试，小组展示成果，测评分析。",
            "容器化模型部署及测试。",
            "多元综合评价。",
            "引导总结代码关键步骤。"
        ],
        "课后拓展": [
            "布置基础、提升、拓展任务。",
            "提供专利查重查新库网址。",
            "教师和企业工程师评价，学生自评互评。"
        ]
    }
};

// 修改教学环节详细数据结构
const teachingProcess = {
    "课前导学": {
        "产品开发流程之需求分析": {
            "布置任务": {
                "教师活动": "讲解人脸识别项目背景和需求分析方法",
                "学生活动": "记录要点，提出疑问",
                "教学资源技术手段": "PPT、项目需求文档模板",
                "设计意图": "帮助学生理解项目需求分析的重要性"
            },
            "分析任务": {
                "教师活动": "指导学生分析数据集需求",
                "学生活动": "分组讨论，完成需求文档",
                "教学资源技术手段": "数据集样例、在线协作平台",
                "设计意图": "培养数据分析和需求分析能力"
            },
            "阶段测试": {
                "教师活动": "设计Python基础测试任务",
                "学生活动": "完成测试，总结知识点",
                "教学资源技术手段": "在线测评系统",
                "设计意图": "检验预备知识掌握情况"
            }
        }
    },
    "课中探知": {
        "产品开发流程之产品设计": {
            "情景引入": {
                "教师活动": "展示人脸识别应用案例",
                "学生活动": "分析案例特点，讨论应用场景",
                "教学资源技术手段": "案例视频、应用demo",
                "设计意图": "激发学习兴趣，明确项目目标"
            },
            "功能设计": {
                "教师活动": "指导功能模块设计",
                "学生活动": "设计功能模块，绘制流程图",
                "教学资源技术手段": "设计工具、模块模板",
                "设计意图": "培养系统设计能力"
            }
        },
        "产品开发流程之软件研发": {
            "需求分析": {
                "教师活动": "讲解数据集处理需求",
                "学生活动": "分析数据特征，制定处理方案",
                "教学资源技术手段": "数据集文档、分析工具",
                "设计意图": "培养数据分析能力"
            },
            "系统设计": {
                "教师活动": "指导算法选择和系统架构",
                "学生活动": "选择算法，设计系统结构",
                "教学资源技术手段": "架构图工具、算法文档",
                "设计意图": "掌握系统设计方法"
            },
            "代码实现": {
                "教师活动": "讲解关键代码实现",
                "学生活动": "编写代码，调试功能",
                "教学资源技术手段": "IDE、代码示例",
                "设计意图": "提升编程实践能力"
            },
            "测试验证": {
                "教师活动": "指导测试方法和评估指标",
                "学生活动": "进行测试，记录结果",
                "教学资源技术手段": "测试数据集、评估工具",
                "设计意图": "培养测试评估能力"
            }
        },
        "产品开发流程之软硬联调": {
            "真机做": {
                "教师活动": "指导模型部署",
                "学生活动": "部署模型，调试运行",
                "教学资源技术手段": "开发板、部署工具",
                "设计意图": "掌握实际部署流程"
            },
            "测功能": {
                "教师活动": "指导功能测试",
                "学生活动": "测试功能，优化性能",
                "教学资源技术手段": "测试用例、性能工具",
                "设计意图": "提升测试调优能力"
            },
            "融评价": {
                "教师活动": "组织项目展示和评价",
                "学生活动": "展示成果，互评交流",
                "教学资源技术手段": "展示平台、评价表",
                "设计意图": "培养表达和评价能力"
            }
        },
        "产品开发流程之创新凝练": {
            "对接专利": {
                "教师活动": "指导专利检索和分析",
                "学生活动": "检索相关专利，分析创新点",
                "教学资源技术手段": "专利库、检索工具",
                "设计意图": "培养创新意识"
            },
            "总结归纳": {
                "教师活动": "指导项目总结",
                "学生活动": "总结经验，提炼创新点",
                "教学资源技术手段": "总结模板、案例库",
                "设计意图": "提升总结提炼能力"
            }
        }
    }
};

// 添加反思思政数据
const reflection = {
    "教学成效": [
        "学生掌握了人脸识别基本原理和实现方法",
        "培养了实践能力和创新思维",
        "提升了团队协作和沟通能力",
        "激发了学习兴趣和专业认同感"
    ],
    "问题与改进": [
        "部分学生算法理解不够深入，需加强理论讲解",
        "项目实践时间偏紧，建议适当延长",
        "测试数据集规模较小，可扩充数据量",
        "需要增加更多实际应用案例"
    ]
};



function displayLessonPlan() {
    // 填充基本信息表格
    document.getElementById('unit-name').textContent = lessonPlan['教学单元'];
    document.getElementById('plan-number').textContent = lessonPlan['教案编号'];
    document.getElementById('course-name').textContent = lessonPlan['课程名称'];
    document.getElementById('course-hours').textContent = lessonPlan['学时安排'];
    document.getElementById('class-name').textContent = lessonPlan['授课班级'];
    document.getElementById('location').textContent = lessonPlan['授课地点'];
    document.getElementById('week-number').textContent = lessonPlan['授课周数'];
    document.getElementById('technology').textContent = lessonPlan['使用技术'];

    // 填充教学内容
    document.getElementById('pre-class').innerHTML = `<ul>${lessonPlan['教学内容']['课前任务'].map(task => `<li>${task}</li>`).join('')}</ul>`;
    document.getElementById('in-class').innerHTML = `<ul>${lessonPlan['教学内容']['课中任务'].map(task => `<li>${task}</li>`).join('')}</ul>`;
    document.getElementById('after-class').innerHTML = `<ul>${lessonPlan['教学内容']['课后任务'].map(task => `<li>${task}</li>`).join('')}</ul>`;
    document.getElementById('ideological').innerHTML = `<ul>${lessonPlan['教学内容']['课程思政'].map(task => `<li>${task}</li>`).join('')}</ul>`;

    // 填充学情分析
    document.getElementById('knowledge-base').innerHTML = `<ul>${lessonPlan['具体学情分析']['知识和技能基础'].map(point => `<li>${point}</li>`).join('')}</ul>`;
    document.getElementById('cognitive-ability').innerHTML = `<ul>${lessonPlan['具体学情分析']['认知和实践能力'].map(point => `<li>${point}</li>`).join('')}</ul>`;
    document.getElementById('learning-features').innerHTML = `<ul>${lessonPlan['具体学情分析']['学习特点'].map(point => `<li>${point}</li>`).join('')}</ul>`;
    document.getElementById('information-literacy').innerHTML = `<ul>${lessonPlan['具体学情分析']['信息素养'].map(point => `<li>${point}</li>`).join('')}</ul>`;

    // 填充教学目标
    document.getElementById('quality-goals').innerHTML = `<ul>${lessonPlan['教学目标']['素质目标'].map(goal => `<li>${goal}</li>`).join('')}</ul>`;
    document.getElementById('knowledge-goals').innerHTML = `<ul>${lessonPlan['教学目标']['知识目标'].map(goal => `<li>${goal}</li>`).join('')}</ul>`;
    document.getElementById('ability-goals').innerHTML = `<ul>${lessonPlan['教学目标']['能力目标'].map(goal => `<li>${goal}</li>`).join('')}</ul>`;

    // 填充教学方法与学法
    document.getElementById('teaching-method').textContent = lessonPlan['教法'];
    document.getElementById('learning-method').textContent = lessonPlan['学法'];

    // 填充教学重难点及解决办法
    document.getElementById('key-points').innerHTML = `<ul>${lessonPlan['教学重点'].map(point => `<li>${point}</li>`).join('')}</ul>`;
    document.getElementById('difficulties').innerHTML = `<ul>${lessonPlan['教学难点'].map(point => `<li>${point}</li>`).join('')}</ul>`;
    document.getElementById('key-solutions').innerHTML = `<ul>${lessonPlan['教学重点解决办法'].map(solution => `<li>${solution}</li>`).join('')}</ul>`;
    document.getElementById('difficulty-solutions').innerHTML = `<ul>${lessonPlan['教学难点解决办法'].map(solution => `<li>${solution}</li>`).join('')}</ul>`;

    // 填充教学环节
    document.getElementById('pre-guidance').innerHTML = `<ul>${lessonPlan['环节']['课前导学'].map(task => `<li>${task}</li>`).join('')}</ul>`;
    document.getElementById('in-class-exploration').innerHTML = `<ul>${lessonPlan['环节']['课中探知'].map(task => `<li>${task}</li>`).join('')}</ul>`;
    document.getElementById('after-class-extension').innerHTML = `<ul>${lessonPlan['环节']['课后拓展'].map(task => `<li>${task}</li>`).join('')}</ul>`;

    // 填充第二个表格（课前导学）
    fillTeachingProcessTable(2);

    // 填充第三个表格（课中探知）
    fillTeachingProcessTable(3);

    // 填充第四个表格（反思思政）
    fillReflectionTable();
}






function fillTeachingProcessTable(tableIndex) {
    const processTable = document.querySelector(`.info-table:nth-of-type(${tableIndex})`);
    if (processTable) {
        const rows = processTable.querySelectorAll('tr');
        // 从第三行开始是数据行（前两行是表头）
        for (let i = 3; i < rows.length; i++) {
            const cells = rows[i].querySelectorAll('td');
            if (cells.length >= 5) {  // 确保有足够的单元格
                // 获取当前行的阶段(phase)值，如果当前单元格为空则从上一行获取
                const phase = cells[0].textContent || cells[0].closest('tr').previousElementSibling?.querySelector('td:first-child')?.textContent;
                // 获取当前行的主题(topic)值，如果当前单元格为空则从上一行获取
                const topic = cells[1].textContent || cells[1].closest('tr').previousElementSibling?.querySelector('td:nth-child(2)')?.textContent;
                console.log('loop rows', 'phase', phase, 'topic', topic);
                // 遍历当前phase和topic下的所有task，检查是否需要合并单元格
                if (phase && topic && teachingProcess[phase]?.[topic]) {
                    const tasks = Object.keys(teachingProcess[phase][topic]);
                    console.log('tasks', tasks);
                    tasks.forEach(task => {
                        console.log('phase', phase, 'topic', topic, 'task', task)
                        if (teachingProcess[phase]?.[topic]?.[task]) {
                            const data = teachingProcess[phase][topic][task];
                            console.log('data', data);
                            cells[3].textContent += data["教师活动"];
                            cells[4].textContent += data["学生活动"];
                            cells[5].textContent += data["教学资源技术手段"];
                            cells[6].textContent += data["设计意图"];
                        }
                    });
                }

            }
        }
    }
}

function fillReflectionTable() {
    const reflectionTable = document.querySelector('.info-table:nth-of-type(4)');
    if (reflectionTable) {
        // 下标从1开始
        const rows = reflectionTable.querySelectorAll('tr');
        rows[2].querySelector('.label-content').innerHTML = reflection["教学成效"].map(item => `<div>${item}</div>`).join('');
        rows[3].querySelector('.label-content').innerHTML = reflection["问题与改进"].map(item => `<div>${item}</div>`).join('');
    }
}

// 使用render.js 时需注释
window.onload = displayLessonPlan;

// 添加模块导出
module.exports = {
    lessonPlan,
    teachingProcess,
    reflection,
    displayLessonPlan,
    fillTeachingProcessTable,
    fillReflectionTable
};